@use './base.scss';
@use './light.scss';
@use './dark.scss';
@use './mixins.scss' as *;
@use 'vue-draggable-resizable/style.css';
@use './rich-text.scss';
@use './cs.scss';
@use './naive-ui.scss';

@tailwind base;
@tailwind components;
@tailwind utilities;

::-webkit-scrollbar-thumb {
	border-radius: 10px;
}

@layer base {
	html,
	body {
		@apply text-base text-t-1 bg-bg-2 font-[600];
	}
}

html,
body {
	font-family:
		'Helvetica Neue',
		v-sans,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol';
	height: 100%;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	// -webkit-font-smoothing: antialiased !important;
	// -moz-osx-font-smoothing: grayscale !important;
	// text-rendering: optimizeLegibility !important;
}

li {
	list-style: none;
}

th {
	font-weight: 600;
}

input {
	font-weight: 600;
}

#app {
	height: 100%;
	min-height: 100%;
}

*,
::before,
::after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
}

.animate__animated {
	animation-duration: 300ms;
}

p {
	margin: 0;
	padding: 0;
}

.app-font-normal {
	@include font-normal();
}

.app-font-bold {
	@include font-bold();
}

.app-font-heavy {
	@include font-heavy();
}

.app-font-num {
	@include font-num();
}

.app-font-tnum {
	font-feature-settings: 'tnum';
}

.app-hover-offset {
	@apply mt-hover-offset;
	transition: transform 0.2s ease-in-out;
	cursor: pointer;
	&:hover {
		@apply -translate-y-hover-offset;
	}
}

.n-date-panel {
	background-color: var(--color-bg-1);
}

// 鼠标交互反应; 尽量使用这个 取代hover:xxx
// 使用方式是在元素上添加这个类名
// :hover (悬停) 时叠加 0.1 白色 变亮
// :active (按下) 时叠加 0.1 黑色 变暗
.app-bg-react {
	cursor: pointer;
	&:hover {
		background-image: var(--bg-hover-mask);
	}
	&:active {
		background-image: var(--bg-active-mask);
	}
}

.app-text-react {
	cursor: pointer;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-color: currentColor;
	&:hover {
		background-image: var(--text-hover-mask);
	}
	&:active {
		background-image: var(--text-active-mask);
	}
}

.app-text-link {
	cursor: pointer;
	&:hover {
		color: var(--color-primary);
	}
	&:active {
		background-clip: text;
		-webkit-text-fill-color: transparent;
		background-color: var(--color-primary);
		background-image: var(--text-active-mask);
	}
}

html {
	::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}
	/* 滚动条上的滚动滑块 */
	::-webkit-scrollbar-thumb {
		background-color: rgba(125, 125, 125, 0.5);
		-webkit-border-radius: 6px;
	}
	/* 滚动条轨道 */
	::-webkit-scrollbar-track {
		background-color: transparent;
		border-radius: 32px;
	}
}

.n-progress-icon.n-progress-icon--as-text {
	@apply font-bold;
	position: absolute;
	bottom: 115%;
	right: 0;
	padding-left: 0;
	width: fit-content !important;
	font-size: 12px !important;
	color: var(--color-success);
}

.mobile-popup {
	position: fixed;
	width: 100% !important;
	height: calc(100% - 60px);
	bottom: 0 !important;
}
.word-spacing__primary{
	letter-spacing: 0px;
}

.link{
	color: var(--color-text-2);
	text-decoration:none;
}
.has-space{
	padding-left: 17px;
	padding-right: 17px;
}
.container{
	max-width: 1390px;
}
.animate-scale-opacity{
	animation: 3s ease-in-out 0s infinite normal none running scaleOpacity;
}
.rotate-0-important{
	--tw-rotate: 0deg !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.swiper-button-disabled{
	opacity: .5;
}
.filter-primary{
	filter: brightness(0) saturate(100%) invert(39%) sepia(50%) saturate(2802%) hue-rotate(228deg) brightness(99%) contrast(103%);
}
.h-group-t-big{
	height: 24px;
}
.h-group-t-xl{
	height: 40px;
}
.swiper-button-lock{
	display: flex !important;
}
.switch-tab__wrapper{
	padding: 10px;
	background-color: var(--color-bg-1);
	border-radius: 8px;
	overflow-x: auto;
	gap: 20px;
	justify-content: space-between;
	height: 68px;
	display: flex;
}
.modal-wrapper{
	position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000000f5;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-container{
	width: 400px;
    border-radius: 9px;
	padding: 35px;
    background-color: var(--color-bg-1);
}
.modal-body{
	padding: 35px;
	padding-top: 0;
}
@keyframes scaleOpacity {
	0%, 100% { transform: scale(1); opacity: 0.75; }
	50% { transform: scale(1.05); opacity: 1; }
  }
@media(max-width: 768px){
	.app-hover-offset:hover{
		transform: translateY(0);
	}
	.app-mt-0{
		margin-top: 0;
	}
	.app-bg-react:hover{
		background-image: unset;
	}
	.h-group-t-xl{
		height: 32px;
	}
	.modal-container{
		width: 90%;
	}
}
